let path = undefined;
const res = {};
const saveFile = document.querySelector("#save-file");
const fileUploader = document.querySelector("#file-uploader");
const fileSent = document.querySelector("#file-sent");
const fileName = document.querySelector("#file-name");
const fileCreator = document.querySelector("#file-creator");
const folderName = document.querySelector("#folder-name");
const folderCreator = document.querySelector("#folder-creator");
const fileDown = document.querySelector("#file-down");
const nameShow = document.querySelector("#user-name-show");
const signOut = document.querySelector("#sign-out");
const fileDelete = document.querySelector("#delete-file");
const fileShow = document.querySelector("#fileShow");
const contentShow = document.querySelector("#content-show");
const fileNameShow = document.querySelector("#file-name-show");
const pathShow = document.querySelector("#path-show");
signOut.addEventListener("click", event => {
    window.location.replace("http://127.0.0.1:5000/login");
});
async function getRootName() {
    const res = await axios.get(
        "http://127.0.0.1:5000/getName",
        {
            path,
        }
    )
    nameShow.innerHTML = "用户："+res.data.name;
}
getRootName();
saveFile.addEventListener("click", async event => {
    const res = await axios.post(
        "http://127.0.0.1:5000/edit_file",
        {
            path,
            content: editor.value
        }
    )
});
fileCreator.addEventListener("click", async event => {
    const res = await axios.get(
        "http://127.0.0.1:5000/create-file",
        {
            params: {
                path,
                name: fileName.value
            }
        }
    )
    const children = res.data.children;
    const page = document.createElement("ul");
    page.className ="list-group list-root";
    children.forEach(child => {
        const childEle = createNewFolder(child);
        page.appendChild(childEle)
    });

    fileShow.innerHTML = "";
    fileShow.appendChild(page)
});
fileDelete.addEventListener("click", async event => {
    const res = await axios.get(
        "http://127.0.0.1:5000/delete-file",
        {
            params: {
                path
            }
        }
    )
    const rootPath = path.split("\\");
    const newArr = [];

    for (let i=0;i<rootPath.length;i++)
    {
        if(i==2){
            newArr.push("root")
        }
        if(i>2){
            newArr.push(rootPath[i])
        }
    }
    newArr.pop()
    const newPath = newArr.join("\\");
    pathShow.innerHTML=newPath;
    fileNameShow.innerHTML="<NULL>"
    const children = res.data.children;
    const page = document.createElement("ul");
    page.className ="list-group list-root";
    children.forEach(child => {
        const childEle = createNewFolder(child);
        page.appendChild(childEle)
    });

    fileShow.innerHTML = "";
    fileShow.appendChild(page)
});
folderCreator.addEventListener("click", async event => {
    const res = await axios.get(
        "http://127.0.0.1:5000/create-folder",
        {
            params: {
                path,
                name: folderName.value
            }
        }
    )
    console.log(path)
    const children = res.data.children;
    const page = document.createElement("ul");
    page.className ="list-group list-root";
    children.forEach(child => {
        const childEle = createNewFolder(child);
        page.appendChild(childEle)
    });

    fileShow.innerHTML = "";
    fileShow.appendChild(page)
});
fileUploader.addEventListener('click', async event => {
    const formData = new FormData();
    const file = fileSent.files[0];
    formData.append("path", path);
    formData.append("file-sent", file);
    const res = await axios.post(
        "http://127.0.0.1:5000/receive-file",
        formData
    );
    const children = res.data.children;
    const page = document.createElement("ul");

    page.className ="list-group list-root";
    children.forEach(child => {
        const childEle = createNewFolder(child);
        page.appendChild(childEle)
    });

    fileShow.innerHTML = "";
    fileShow.appendChild(page)
});
fileDown.addEventListener('click', async event => {
    fileDown.href=`http://127.0.0.1:5000/fileDown?path=${path}`
    fileDown.href=""
});

res.data
    = {
    "name": "root",
    "path": "",
    "fold": true
}

const handleClick = params => async () => {
    path = params.path;
    console.log(path);
    const extension = path.split('.').pop();
    const imgFile = path.split("\\").pop();
    const rootPath = path.split("\\");
    const newArr = [];

    for (let i=0;i<rootPath.length;i++)
    {
        if(i==2){
            newArr.push("root")
        }
        if(i>2){
            newArr.push(rootPath[i])
        }
    }
    const newPath = newArr.join("\\");
    console.log(newPath);
    if(newPath != null){
        pathShow.innerHTML=newPath;
    }
    if(newPath.length ==0){
        pathShow.innerHTML="root";
    }
    fileNameShow.innerHTML=imgFile;
    const file_type = ['jpg', 'bmp', 'png', 'jpeg', 'jfif'];
    if (file_type.includes(extension)) {
        const img = document.createElement("img");
        img.className = "img";
        img.src = `http://127.0.0.1:5000/image?path=${path}`;
        contentShow.innerHTML="";
        contentShow.appendChild(img)
    }
    else {
        const res = await axios.get(
            "http://127.0.0.1:5000/file-list-sent", {params}
        );
        console.log(path);
        if (res.data.children) {
            const children = res.data.children;
            const page = document.createElement("ul");
            page.className ="list-group list-root";
            children.forEach(child => {
                const childEle = createNewFolder(child);
                page.appendChild(childEle)
            });

            fileShow.innerHTML = "";
            fileShow.appendChild(page)
        } else if (res.data.content !== undefined) {
            const editor = document.createElement("textarea");
            editor.id = "editor"
            const imgFile = path.split("\\").pop();
            editor.className = "editor";
            fileNameShow.innerHTML=imgFile
            editor.value = res.data.content;
            contentShow.innerHTML="";
            contentShow.appendChild(editor);
        }

    }
}

const createNewFolder = child => {
    const ele = document.createElement("li");
    ele.className = "list-group-item";
    ele.innerHTML = `<span>${child.name}</span>`;
    ele.addEventListener("click", handleClick({path: child.path}));

    return ele;
}
const page = document.createElement("ul");
const rootFolder = document.createElement("li");
page.className ="list-group list-root";
console.log(res.data.name)
rootFolder.innerHTML = `<span>${res.data.name}</span>`;
rootFolder.className = "list-group-item";
rootFolder.addEventListener("click", handleClick({path: res.data.path}))
page.appendChild(rootFolder);
fileShow.appendChild(page);

